<template>
  <view class="container">
    <!-- 顶部区域 -->
    <view class="header">
      <!-- 商家信息区块 -->
      <view class="shop-info">
        <image class="shop-avatar" src="/static/images/tabbar/mine.png" mode="aspectFit" />
        <view class="shop-name">XXX修车厂，欢迎您</view>
      </view>

      <!-- 操作按钮区块（水平排列） -->
      <view class="action-buttons">
        <button class="btn scan-btn" @click="handleScan">
          <uni-icons type="scan" size="18" color="black" />
          <text>扫描核销</text>
        </button>
        <button class="btn code-btn" @click="handleInputCode">
          <uni-icons type="person-filled" size="18" color="black" />
          <text>输入核销码</text>
        </button>
      </view>
    </view>

    <!-- 功能模块（带分隔线） -->
    <view class="function-grid">
      <view 
        v-for="(item, index) in functions" 
        :key="index" 
        class="function-item"
        @click="navigateTo(item)"
      >
        <uni-icons :type="item.icon" size="28" :color="item.color || '#1890ff'" />
        <text class="function-label">{{ item.label }}</text>
      </view>

      <!-- 新增紧急救援按钮 -->
      <view 
        class="function-item emergency-item"
        @click="navigateToEmergency"
      >
        <uni-icons type="alert" size="28" color="#ff4d4f" />
        <text class="function-label">紧急救援</text>
      </view>
    </view>

    <!-- 维修任务通知（带图标和红字） -->
    <view class="task-notice">
      <view class="notice-header">
        <view class="title-wrapper">
          <uni-icons type="notification" size="24" color="#333" />
          <text class="title">最新通知</text>
        </view>
        <text class="more red-text" @tap="gotoRepairTasks">今日接上门取车任务共32单>></text>
      </view>
      <scroll-view scroll-y class="task-table">
        <view class="table-header">
          <text class="header-cell">用户</text>
          <text class="header-cell">服务项目</text>
          <text class="header-cell">时间</text>
        </view>
        <view 
          v-for="(task, index) in tasks" 
          :key="index" 
          class="table-row"
          :class="{ even: index % 2 }"
        >
          <text class="row-cell">{{ task.user }}</text>
          <text class="row-cell">{{ task.service }}</text>
          <text class="row-cell">{{ task.time }}</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 功能模块数据
const functions = ref([
  { label: '经营统计', icon: 'shop-filled' },
  { label: '核销记录', icon: 'list' },
  { label: '收支明细', icon: 'wallet' },
  { label: '订单管理', icon: 'cart' },
  { label: '卡券管理', icon: 'gift' },
  { label: '维修任务', icon: 'settings' },
  { label: '评价管理', icon: 'star' },
  { label: '商户资料', icon: 'info' },
  { label: '活动发布', icon: 'notification' }
]);

// 任务数据
const tasks = ref([
  { user: '张**', service: '汽车精细', time: '2022-10-10 11:09' },
  // 其他数据...
]);

const handleScan = () => {
  // 扫描核销逻辑
  uni.navigateTo({
    url: "/pages/QRcode/QRcode"
  });
};

const handleInputCode = () => {
  // 输入核销码逻辑
  uni.navigateTo({
    url: '/pages/Verification_code/Verification_code'
  });
};

const navigateTo = (item) => {
  if (item.label === '经营统计') {
    uni.navigateTo({
      url: '/pages/business_data/business_data'
    });
  }
  if (item.label === '核销记录') {
    uni.navigateTo({
      url: '/pages/records/records'
    });
  }
  if (item.label === '收支明细') {
    uni.navigateTo({
      url: '/pages/IncomeAndExpenses/IncomeAndExpenses'
    });
  }
  if (item.label === '订单管理') {
    uni.navigateTo({
      url: '/pages/order_management/order_management'
    });
  }
  if (item.label === '卡券管理') {
    uni.navigateTo({
      url: '/pages/cards/cards'
    });
  }
  if (item.label === '维修任务') {
    uni.navigateTo({
      url: '/pages/repair_tasks/repair_tasks'
    });
  }
  if (item.label === '评价管理') {
    uni.navigateTo({
      url: '/pages/evaluation/evaluation'
    });
  }
  if (item.label === '活动发布') {
    uni.navigateTo({
      url: '/pages/event_posted/event_posted'
    });
  }
  if (item.label === '商户资料') {
    uni.navigateTo({
      url: '/pages/merchant_information/merchant_information'
    });
  }
};

// 新增紧急救援跳转方法
const navigateToEmergency = () => {
  uni.navigateTo({
    url: '/pages/jiuyuan/jiuyuan'
  });
};

const gotoRepairTasks = () => {
  uni.navigateTo({
    url: '/pages/repair_tasks/repair_tasks'
  });
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

/* 修改后的顶部样式 */
.header {
  background: #00aaff;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;

  .shop-info {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;

    .shop-avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .shop-name {
      font-size: 34rpx;
      color: #fff;
      font-weight: 500;
    }
  }

  .action-buttons {
    display: flex;
    flex-direction: row;
    gap: 20rpx;

    .btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5rpx;
      border-radius: 12rpx;
      font-size: 28rpx;

      uni-icons {
        margin-right: 5rpx;
      }

      &.scan-btn {
        background: linear-gradient(45deg, #ffffff, #ffffff);
        color: black;
      }

      &.code-btn {
        background: #fff;
        color: black;
        border: 1rpx solid #91d5ff;
      }
    }
  }
}

/* 功能模块分隔线 */
.function-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #eee;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 20rpx;

  .function-item {
    background: white;
    padding: 40rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    .function-label {
      font-size: 26rpx;
      color: #666;
      margin-top: 15rpx;
    }
  }

  /* 紧急救援按钮特殊样式 */
  .emergency-item {
    animation: pulse 2s infinite;

    .function-label {
      color: #ff4d4f;
      font-weight: bold;
    }
  }
}

/* 呼吸动画 */
@keyframes pulse {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.05); }
  100% { transform: scale(0.95); }
}

/* 通知区域调整 */
.task-notice {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;

  .notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .title-wrapper {
      display: flex;
      align-items: center;
      gap: 12rpx;

      .title {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }
    }

    .red-text {
      color: #ff4d4f;
      font-size: 24rpx;
    }
  }

  .task-table {
    max-height: 500rpx;

    .table-header, .table-row {
      display: flex;
      padding: 20rpx 0;

      .header-cell, .row-cell {
        flex: 1;
        text-align: center;
        font-size: 26rpx;
      }

      .header-cell {
        color: #666;
        font-weight: bold;
      }
    }

    .table-row.even {
      background-color: #fafafa;
    }
  }
}
</style>